<template>
  <div class="app-container">
    <div class="cardBox">
      <el-form :inline="true" class="search-form" label-width="100px">
        <el-row style="display: flex; flex-wrap: wrap">
          <div style="flex: 1">
            <el-form-item label="订单流水号" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入订单流水号"
                v-model="searchForm.order_no"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="发货单号" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入发货单号"
                v-model="searchForm.delivery_no"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="商品名称" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入商品名称"
                v-model="searchForm.search"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="状态" style="margin: 5px 0">
              <el-select
                clearable
                v-model="searchForm.status"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in [
                    { name: '待支付', id: 1 },
                    { name: '已完成', id: 2 },
                  ]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="商户名称"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商户名称"
                v-model="searchForm.mer_name"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="商户手机号"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商户手机号"
                v-model="searchForm.mer_cellphone"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="商品ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商品ID"
                v-model="searchForm.goods_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="收货人姓名"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入收货人姓名"
                v-model="searchForm.consignee_name"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="收货人手机号"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入收货人手机号"
                v-model="searchForm.consignee_cellphone"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
          </div>
          <div style="padding: 5px 0">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
              <el-button
                v-if="!searchDisplay"
                type="warning"
                icon="el-icon-caret-bottom"
                @click="searchDisplay = true"
                >展开</el-button
              >
              <el-button
                v-else
                type="warning"
                icon="el-icon-caret-top"
                @click="searchDisplay = false"
                >收起</el-button
              >
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="grouping cardBox" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button @click="pathWay" icon="el-icon-tickets" type="primary"
              >售后订单</el-button
            >
          </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="getListWay"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            highlight-current-row
            :data="OrderList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row[fruit] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="商品名称">
              <template slot-scope="scope">
                {{ scope.row.goods.goods_name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="商品主图">
              <template slot-scope="scope">
                <div style="width: 40px; height: 40px; margin: 0 auto">
                  <el-image
                    :src="scope.row.goods ? scope.row.goods.goods_image : ''"
                    :preview-src-list="[
                      scope.row.goods ? scope.row.goods.goods_image : '',
                    ]"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="规格名称">
              <template slot-scope="scope">
                {{ scope.row.goods.sku_name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="收货人姓名">
              <template slot-scope="scope">
                {{ scope.row.consignee_info.real_name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="收货人电话">
              <template slot-scope="scope">
                {{ scope.row.consignee_info.real_cellphone }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="收货人地址">
              <template slot-scope="scope">
                {{ scope.row.consignee_info.address }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="店铺名称">
              <template slot-scope="scope">
                {{ scope.row.merchant.name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="负责人姓名">
              <template slot-scope="scope">
                {{ scope.row.merchant.user_name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="负责人手机号">
              <template slot-scope="scope">
                {{ scope.row.merchant.user_cellphone }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 2" type="warning"
                  >待发货</el-tag
                >
                <el-tag v-if="scope.row.status == 3" type="info">待收货</el-tag>
                <el-tag v-if="scope.row.status == 5" type="danger"
                  >已取消</el-tag
                >
                <el-tag v-if="scope.row.status == 4" type="success"
                  >已完成</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              width="150"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  style="margin: 5px"
                  v-if="scope.row.status == 2"
                  type="warning"
                  size="mini"
                  @click="editNotesWay(scope.row)"
                >
                  去发货
                </el-button>
                <!-- 
                <el-tag
                  style="margin: 5px"
                  v-if="scope.row.status == 2"
                  type="info"
                  >待收货</el-tag
                >
                <el-tag
                  style="margin: 5px"
                  v-if="scope.row.status == 3"
                  type="success"
                  >已完成</el-tag
                > -->

                <el-button
                  style="margin: 5px"
                  type="primary"
                  size="mini"
                  @click="detailsDialogway(scope.row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <el-row style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.count"
          @pagination="getListWay"
        />
      </el-row>
    </div>

    <!-- 去发货弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      title="去发货"
      :visible.sync="dialogSendOutGoods"
      width="500px"
      @close="SendOutGoodsClose"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="快递名称" prop="express_name">
          <el-input
            maxlength="20"
            show-word-limit
            clearable
            v-model="form.express_name"
            placeholder="请输入快递名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="express_num">
          <el-input
            clearable
            maxlength="20"
            show-word-limit
            v-model="form.express_num"
            placeholder="请输入快递单号"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSendOutGoods = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitWay"
          :loading="dialogSendOutGoodsSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 查看快递信息 -->
    <el-dialog
      :close-on-click-modal="false"
      title="快递信息"
      :visible.sync="dialogdelivery"
      width="700px"
    >
      <el-descriptions
        :style="index !== 0 ? 'margin-top:20px' : ''"
        v-for="(item, index) in delivery_list"
        :key="index"
        class="margin-top"
        :title="item.express_name"
        :column="3"
        border
      >
        <el-descriptions-item label="快递">
          {{ item.express_name }}
        </el-descriptions-item>
        <el-descriptions-item label="订单号">
          {{ item.express_num }}
        </el-descriptions-item>
        <el-descriptions-item label="发货时间">
          {{ item.created_at }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人名称">
          {{ item.recipient }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人手机号">
          {{ item.phone_number }}
        </el-descriptions-item>
        <el-descriptions-item label="省市区">
          {{ item.province_name }}
          {{ item.city_name }}
          {{ item.district_name }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          {{ item.address_details }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogdelivery = false">取 消</el-button>
        <el-button type="primary" @click="dialogdelivery = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="订单信息"
      :visible.sync="detaildialog"
      width="800px"
    >
      <el-row style="position: relative" v-loading="detailLoading">
        <el-descriptions title="订单信息" :column="3" border>
          <el-descriptions-item label="订单id">
            {{ detailsObj.order_id ? detailsObj.order_id : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单编号">
            {{ detailsObj.order_no ? detailsObj.order_no : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag
              style="margin: 5px"
              v-if="detailsObj.status ? detailsObj.status == 1 : false"
              type="warning"
              >待支付</el-tag
            >
            <el-tag
              style="margin: 5px"
              v-if="detailsObj.status ? detailsObj.status == 2 : false"
              type="success"
              >已完成</el-tag
            >
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          style="margin-top: 20px"
          title="商品信息"
          :column="3"
          border
        >
          <el-descriptions-item label="商品ID">
            {{ detailsObj.goods ? detailsObj.goods.goods_id : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="商品名称">
            {{ detailsObj.goods ? detailsObj.goods.goods_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="购买数量">
            {{ detailsObj.goods ? detailsObj.goods.number : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="规格名称">
            {{ detailsObj.goods ? detailsObj.goods.sku_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="商品图片">
            <div style="width: 40px; height: 40px; margin: 0 auto">
              <el-image
                :src="detailsObj.goods ? detailsObj.goods.goods_image : ''"
                :preview-src-list="[
                  detailsObj.goods ? detailsObj.goods.goods_image : '',
                ]"
              />
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          style="margin-top: 20px"
          title="供应商信息"
          :column="3"
          border
        >
          <el-descriptions-item label="供应商ID">
            {{ detailsObj.merchant ? detailsObj.merchant.id : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="供应商名称">
            {{ detailsObj.merchant ? detailsObj.merchant.name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="负责人">
            {{ detailsObj.merchant ? detailsObj.merchant.user_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="负责人手机号">
            {{ detailsObj.merchant ? detailsObj.merchant.user_cellphone : "-" }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          style="margin-top: 20px"
          title="收货信息"
          :column="3"
          border
        >
          <el-descriptions-item label="收货人名称">
            {{
              detailsObj.consignee_info
                ? detailsObj.consignee_info.real_name
                : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="收货人手机号">
            {{
              detailsObj.consignee_info
                ? detailsObj.consignee_info.real_cellphone
                : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="收货地址" :span="3">
            {{
              detailsObj.consignee_info
                ? detailsObj.consignee_info.address
                : "-"
            }}
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detaildialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import { getSupplyOrderList, editDelivery } from "@/api/order/index";
import {
  getOrderSelfList,
  getOrderSelfDetail,
  orderSelfdelivery,
} from "@/api/merchant/index";
const tableTheadOption = {
  order_no: {
    label: "订单号",
    field: "order_no",
  },
  // "consignee_info.real_name": {
  //   label: "收货人姓名",
  //   field: "consignee_info.real_name",
  // },
  // "consignee_info.real_cellphone": {
  //   label: "收货人电话",
  //   field: "consignee_info.real_cellphone",
  // },
  // "consignee_info.address": {
  //   label: "收货人地址",
  //   field: "consignee_info.address",
  // },
  // "goods.goods_id": {
  //   label: "商品ID",
  //   field: "goods.goods_id",
  // },
  // "goods.goods_name": {
  //   label: "商品名称",
  //   field: "goods.goods_name",
  // },
  // "goods.goods_image": {
  //   label: "商品主图",
  //   field: "goods.goods_image",
  // },
  // "goods.sku_name": {
  //   label: "规格名称",
  //   field: "goods.sku_name",
  // },
  // status: {
  //   label: "状态",
  //   field: "status",
  // },
  // "merchant.id": {
  //   label: "商户ID",
  //   field: "id",
  // },
  // "merchant.name": {
  //   label: "店铺名称",
  //   field: "name",
  // },
  // " merchant.user_name": {
  //   label: "负责人姓名",
  //   field: "user_name",
  // },
  // "merchant.user_cellphone": {
  //   label: "负责人手机号",
  //   field: "user_cellphone",
  // },
};
const allTableThead = [
  "order_no",
  // "goods.goods_id",
  // "goods.goods_name",
  // "goods.goods_image",
  // "goodssku_name",
  // "consignee_inf.oreal_name",
  // "consignee_inf.oreal_cellphone",
  // "consignee_inf.oaddress",
  // "merchant.id",
  // "merchant.name",
  // "merchant.user_name",
  // "merchant.user_cellphone",
  // "status",
];
const defaultTableThead = [
  "order_no",
  // "goods.goods_name",
  // "goods.goods_image",
  // "consignee_inf.oreal_name",
  // "consignee_inf.oreal_cellphone",
  // "consignee_inf.oaddress",
  // "merchant.name",
  // "merchant.user_name",
  // "status",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchDisplay: false,
      searchForm: {
        goods_id: "", //商品ID
        search: "", //商品名称
        order_no: "", //订单编号
        mer_name: "", //商户名称
        mer_cellphone: "", //商户手机号
        delivery_no: "", //发货单号
        consignee_name: "", //收货人姓名
        consignee_cellphone: "", //收货人手机号
        status: "", //状态(1.待支付,2.已完成)
        count: 10,
        page: 1,
      },
      create_time: [],
      pay_time: [],
      OrderList: [],
      total: 0,
      dialogSendOutGoods: false,
      dialogSendOutGoodsSubmit: false,
      form: {
        detail_id: "",
        express_name: "",
        express_num: "",
      },
      rules: {
        express_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请输入快递名称"));
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error("快递单号格式不正确,不能包含特殊字符")
                  );
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
        express_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z]/g;
              if (value == "") {
                return callback(new Error("请输入快递单号"));
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error("快递单号格式不正确,只能包含数字和英文")
                  );
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      dialogdelivery: false,
      delivery_list: [],
      detailsObj: {},
      detaildialog: false,
      detailLoading: false,
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getOrderSelfList(this.searchForm)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.loading = false;
          this.OrderList = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    resetting() {
      this.searchForm = {
        status: "",
        user_id: "",
        order_no: "",
        phone_number: "",
        pageSize: 10,
        page: 1,
      };
      this.getListWay();
    },
    // 打开修改备注的弹框
    editNotesWay(row) {
      this.dialogSendOutGoods = true;
      this.$nextTick(() => {
        this.SendOutGoodsClose();
        this.form.order_id = row.order_id;
      });
    },
    SendOutGoodsClose() {
      this.form = {
        order_id: "",
        express_name: "",
        express_num: "",
      };
      this.$refs.form.resetFields();
    },
    submitWay() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogSendOutGoodsSubmit = true;
          orderSelfdelivery(this.form)
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.loading = false;
                this.dialogSendOutGoods = false;

                return this.$messages.error(res.msg);
              }
              this.SendOutGoodsClose();
              this.dialogSendOutGoods = false;
              this.dialogSendOutGoodsSubmit = false;
              this.$messages.success(res.msg);
              this.getListWay();
            })
            .catch((err) => {
              this.dialogSendOutGoodsSubmit = false;
              this.$messages.error(err.msg);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    drawerHandle(row) {
      this.delivery_list = row.delivery_list;
      this.dialogdelivery = true;
    },
    pathWay() {
      this.$router.push("/merchant/procure/afterpickup");
    },
    create_timeWay(vla) {
      this.searchForm.create_time_start = vla[0];
      this.searchForm.create_time_end = vla[1];
    },
    pay_timeWay(vla) {
      this.searchForm.pay_time_start = vla[0];
      this.searchForm.pay_time_end = vla[1];
    },
    detailsDialogway(row) {
      this.detaildialog = true;
      this.detailLoading = true;
      console.log(row);
      getOrderSelfDetail({ id: row.order_id }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.detailLoading = false;
          this.detaildialog = false;
          return this.$messages.error(res.msg);
        }
        this.detailLoading = false;
        this.detailsObj = res.data;
        console.log(this.detailsObj);
      });
      //
      // console.log(this.detailsObj);
      // this.detailLoading = false;
    },
  },
};
</script>
  
  <style>
</style>